<template>
  <div class="icon_box">
    <img src="../assets/lunbo/xinxi2.jpg" @dragstart="hidstart" @drag="hidg" @dragend="hidgend" @click="higotomysystem" alt="" class="loginsystemicon">
  </div>
</template>
<script>
  var offsetX,offsetY;
  export default{
    data(){
      return{

      }
    },
    methods:{
      higotomysystem:function (event) {
        this.$router.replace({path:'/loginindex'});
      },
      hidstart:function(e){
        //console.log(e);
        console.log("开始拖动");
        //获取元素当前位置
        offsetX= e.offsetX;
        offsetY= e.offsetY;
      },
      hidg:function(e){
        console.log(e);
        console.log("拖动中");
        //获取元素实时位置
        var x= e.pageX;
        var y= e.pageY;
        console.log(x+'-'+y);
        if(x==0 && y==0){
          return;
        }
        x-=offsetX;
        y-=offsetY;
        e.currentTarget.style.left=x+'px';
        e.currentTarget.style.top=y+'px';
      },
      hidgend:function(e){
        //console.log(e);
        console.log("拖动结束");
      }
    },

  }
</script>
<style scoped>
  .loginsystemicon{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 100px;
    top:200px;
    opacity: 0.4;
    transition: 0.8s;
  }
  .loginsystemicon:hover{
    opacity: 0.8;
  }
</style>
